<!--
 * @Author: cqg 
 * @Date: 2020-11-12 20:32:14
 * @LastEditors: cqg
 * @LastEditTime: 2020-12-29 11:22:25
 * @Description: file content
-->
<template>
  <contractLayout>
    <!-- 合同列表 -->
    <template slot="left">
      <contractList
        :pageInfo="contract.pager"
        placeholder="请输入物业名称"
        searchName="propertyNames"
        selectName="checkStatus"
        selectShow
        :selectOp="selectOp"
        v-loading="contract.loading"
        element-loading-text="数据加载中..."
      >
        <ul class="contractList">
          <li v-for="item in contract.tableData" :key="item.rentContractId" :class="{ active: item.active }" @click="changeAccountList(item.rentContractId)">
            <div class="top">
              <div class="title">{{ item.propertyNames }}</div>
              <span class="btn" @click.stop="$refs.contractView.show(item.rentContractId)">查看合同</span>
              <span class="btn" @click.stop="$refs.accounting.show('edit', item)">租金核算</span>
            </div>
            <el-row>
              <el-col :span="8">建筑面积</el-col>
              <el-col :span="16">{{ item.buildingArea }}㎡</el-col>
            </el-row>
            <!-- <el-row>
                <el-col :span="8">物业名称</el-col>
                <el-col :span="16">{{item.propertyNames}}</el-col>
            </el-row>-->
            <el-row>
              <el-col :span="8">物业地址</el-col>
              <el-col :span="16">{{ item.address }}</el-col>
            </el-row>
            <el-row>
              <el-col :span="8">合同期限</el-col>
              <el-col :span="16">{{ item.startDate }}至{{ item.endDate}}</el-col>
            </el-row>
          </li>
        </ul>
      </contractList>
    </template>
    <!-- 费用列表 -->
    <div class="accountWarp" v-loading="account.loading" element-loading-text="数据加载中...">
      <dataList
        placeholder="搜索物业名称"
        :pageInfo="account.pager"
        :listData="account.tableData"
        :selectData="account.selectDataArr"
        searchName="propertyNames"
        :filterList="account.filterList"
        :menuList="[]"
        :listLayout="['menu','filter']"
        ref="dataList"
      >
        <el-table
          ref="multipleTable"
          :data="account.tableData"
          border
          @selection-change="
                        $event => (account.selectDataArr = $event)
                    "
        >
          <!-- <el-table-column type="selection" width="55" align="center"/> -->
          <el-table-column label="物业名称" width="100" align="center" prop="propertyNames" />
          <el-table-column label="账单日期" width="100" align="center" prop="billDate" />
          <el-table-column label="费用周期" align="center">
            <template slot-scope="scope">
              {{ scope.row.costPeriodStart }} _
              {{ scope.row.costPeriodEnd }}
            </template>
          </el-table-column>
          <el-table-column label="合同总金额(元)" width="120" align="center" prop="contractReceivableMoneyTotal" />
          <el-table-column label="本次应收租金(元)" width="135" align="center" prop="currentReceivableMoney" />
          <el-table-column label="本次申请收款金额(元)" width="140" align="center" prop="receivableTotal" />
          <el-table-column label="状态" width="70" align="center" :formatter="dictVal_bill_status" prop="billStatus" />

          <el-table-column label="操作" align="center" class="operaColumn" width="150">
            <template slot-scope="scope">
              <el-button
                type="text"
                style="--color:#409EFF"
                size="mini"
                @click="
                                    $refs.accounting.show('preview', scope.row)
                                "
              >查看</el-button>
              <el-button type="text" style="--color:#666666" size="mini" v-throttle=" [()=>submit(scope.row)]" v-if="scope.row.billStatus == '00'">提交</el-button>
              <el-button
                type="text"
                style="--color:#F56C6C"
                size="mini"
                @click="abolition(scope.row)"
                v-if="scope.row.billStatus == '00' ||scope.row.billStatus == '01' ||scope.row.billStatus == '02'"
              >作废</el-button>
            </template>
          </el-table-column>
        </el-table>
      </dataList>
    </div>
    <!-- 合同展示组件 -->
    <contract-view ref="contractView" />
    <accounting ref="accounting" @changeAccountList="changeAccountList" />
  </contractLayout>
</template>

<script src="./index.js"></script>

<style lang="scss" scoped>
.operating {
  color: blue;
}
.contractList {
  li {
    position: relative;
    padding: 15px 20px;
    border-top: 1px solid rgba(97, 106, 120, 0.07);
    transition: all 0.3s linear;
    cursor: pointer;
    &:after {
      content: "";
      width: 1px;
      height: 100%;
      position: absolute;
      transition: all 0.3s linear;
      right: 0;
      top: 0;
    }
    &.active {
      background-color: #e1f7ff;
      &:after {
        background-color: #1563d1;
      }
    }
    .top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 14px;
      .title {
        color: #000;
        font-weight: bold;
        max-width: calc(100% - 5em);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .btn {
        cursor: pointer;
        color: #409eff;
      }
    }
    .el-row {
      margin-top: 10px;
      color: #888;
      .el-col {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }
}
.accountWarp {
  padding: 0 20px;
  /deep/ .inputItem .label {
    margin-right: 10px;
  }
  /deep/ .el-date-editor {
    &.el-range-editor {
      width: 78%;
    }
    .el-range-input {
      width: 35%;
    }
    .el-range-separator {
      width: 11%;
    }
  }
}
</style>
